<template>
  <div>
    <dtDialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :is-loading="loading"
      :footer-slot="dialogStatus === 'detail'? true : false"
      @closeDialog="resetTemp"
      @comfirmBtn="submitForm"
    >
      <div slot="content">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules"
                 label-width="100px" class="demo-ruleForm">
          <el-form-item label="功能名称" prop="functionName">
            <el-input v-model.trim="ruleForm.functionName" placeholder="请输入功能名称" maxlength="7"
                      show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="功能编号" prop="functionCode">
            <span slot="label">
              <span class="span-box">
                <el-tooltip class="item" effect="dark" content="请根据三方功能菜单的编号进行输入"
                            placement="top-start">
                  <i class="el-icon-question" />
                </el-tooltip>
                <span> 功能编号 </span>
              </span>
            </span>
            <el-input v-model.trim="ruleForm.functionCode" placeholder="请输入功能编号" maxlength="50"
                      show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="所属应用" prop="appCode">
            <el-cascader
              v-model="ruleForm.appCode"
              disabled
              :options="thirdOptions"
              placeholder="请选择所属应用"
              size="small"
              :props="{
                value:'appCode',
                label:'name'
              }"
            />
            <!-- <el-select v-model="ruleForm.appCode" filterable placeholder="请选择所属应用" size="small">
              <el-option
                v-for="dict in thirdOptions"
                :key="dict.appCode"
                :label="dict.name"
                :value="dict.appCode"
              />
            </el-select> -->
          </el-form-item>
          <el-form-item label="父级功能" prop="functionParentName">
            <dt-dialog
              :visible.sync="insideDialogVisible"
              :close-on-click-modal="false"
              append-to-body
              width="800px"
              title="父级功能"
              @closeDialog="insideDialogVisible = false"
              @comfirmBtn="onSaveParentMenu"
            >
              <!-- 搜索栏 -->
              <el-input
                v-model.trim="filterText"
                prefix-icon="el-icon-search"
                placeholder="输入搜索功能"
                maxlength="30"
                style="margin: 20px 0;"
              />
              <el-tree
                :ref="menuTree.ref"
                :props="menuTree.props"
                :data="menuTree.data"
                node-key="functionId"
                :filter-node-method="filterNode"
                check-strictly
                highlight-current
                :expand-on-click-node="false"
                :default-expanded-keys="menuTree.defaultExpandedKeys"
              />
            </dt-dialog>
            <el-input v-model.trim="ruleForm.functionParentName" readonly placeholder="请选择父级功能"
                      @focus="onFocusMenuPath" />
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <span slot="label">
              <span class="span-box">
                <el-tooltip class="item" effect="dark" content="请按照三方功能菜单的顺序进行输入"
                            placement="top-start">
                  <i class="el-icon-question" />
                </el-tooltip>
                <span> 排序 </span>
              </span>
            </span>
            <el-input v-model.trim="ruleForm.sort" placeholder="请输入排序" :oninput="initPositiveInteger()"
                      maxlength="8" show-word-limit class="limit" />
          </el-form-item>
          <el-form-item label="路由地址" prop="routerAddress">
            <el-input v-model.trim="ruleForm.routerAddress" placeholder="请输入路由地址" maxlength="50"
                      show-word-limit class="limit" />
          </el-form-item>
        </el-form>
      </div>
    </dtDialog>
  </div>
</template>

<script>
import { positiveInteger, noChinese } from '@/framework/utils/validate'
import { addFunction, editFunction, getSubFunctionTree } from '@/framework/api/threeFunction/index'

export default {
  props: {
    thirdOptions: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      menuTree: {
        ref: 'tree',
        props: {
          label: 'functionName',
          children: 'children'
        },
        data: [],
        defaultExpandedKeys: ['-1']
      },
      filterText: '',
      insideDialogVisible: false,
      ruleForm: {
        functionName: null,
        functionCode: null,
        appCode: null,
        functionParentName: null
      },
      rules: {
        functionName: [
          { required: true, message: '请输入功能名称', trigger: 'blur' }
        ],
        functionCode: [
          { required: true,
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入功能编号'))
              } else if (noChinese(value)) {
                callback(new Error('请不要输入中文字符'))
              } else callback()
            } }
        ],
        appCode: [
          { required: true, message: '请选择所属应用', trigger: 'change' }
        ],
        functionParentName: [
          { required: true, message: '请选择父级功能', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'change' }
        ],
        routerAddress: [
          { trigger: 'blur',
            validator: (rule, value, callback) => {
              if (noChinese(value)) {
                callback(new Error('请不要输入中文字符'))
              } else callback()
            } }
        ]
      },
      dialogStatus: 'create',
      dialogFormVisible: false,
      loading: false,
      textMap: {
        update: '修改功能',
        create: '新增功能',
        detail: '功能详情'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    cascaderChagne(value) {
      this.menuTree.data = []
      this.ruleForm.functionParentName = ''
      this.ruleForm.functionParentId = ''
      getSubFunctionTree({ appCode: value[1] }).then((resp) => {
        this.menuTree.data = [...resp.data]
      })
    },
    // 点击保存父菜单
    onSaveParentMenu() {
      const treeNode = this.$refs.tree.getCurrentNode()
      if (treeNode != null) {
        this.$set(this.ruleForm, 'functionParentName', treeNode.functionName)
        this.ruleForm.functionParentId = treeNode.functionId
      }
      this.insideDialogVisible = false
    },
    // 校验排序规则
    initPositiveInteger(data) {
      return positiveInteger(data)
    },
    openDialog(status, row) {
      this.dialogStatus = status
      row && (this.ruleForm = { ...this.ruleForm, ...JSON.parse(JSON.stringify(row)), appCode: [null, row.appCode] })
      this.dialogFormVisible = true
      getSubFunctionTree({ appCode: row.appCode }).then((resp) => {
        this.menuTree.data = [...resp.data]
      })
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          const fn = this.ruleForm.functionId ? editFunction : addFunction
          fn({ ...this.ruleForm, appCode: this.ruleForm.appCode[1] }).then((res) => {
            this.loading = false
            this.$message({
              type: 'success',
              message: this.ruleForm.functionId ? '修改成功' : '新增成功'
            })
            this.initModal()
            this.dialogFormVisible = false
            this.$emit('getList')
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.loading = false
          return false
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.functionName.indexOf(value) !== -1
    },
    // 点击菜单路径
    onFocusMenuPath() {
      this.insideDialogVisible = true
      this.filterText = ''
      this.$nextTick(() => {
        this.$refs[this.menuTree.ref].setCurrentKey(this.ruleForm.functionParentId)
      })
    },
    initModal() {
      this.menuTree.data = []
      this.ruleForm = {
        functionName: null,
        functionCode: null,
        appCode: null,
        functionParentName: null,
        sort: null
      }
      this.$refs.ruleForm.resetFields()
    },
    resetTemp() {
      this.initModal()
    }
  }
}
</script>

<style type="text/css" scoped>
</style>
